<template>
  <el-card class="container">
    <el-row class="comments_row1">
      <el-col class="count">{{ commentList.length }}条评论</el-col>
      <el-col class="time">
        <el-button type="text" @click="changeSort" icon="el-icon-sort"
          >切换时间顺序</el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <el-input v-model="input" placeholder="写下你的评论...">
        <template slot="append">
          <el-button @click="submit">发布</el-button>
        </template>
      </el-input>
    </el-row>
    <el-row class="list">
      <el-row class="list_item" v-for="item in commentList" :key="item.id">
        <el-row class="row1">
          <el-col class="title">
            <div class="userInfo" @click="chatTo(item.id)">
              <el-avatar
                class="img"
                shape="square"
                icon="el-icon-user-solid"
                :src="item.imageUrl"
              ></el-avatar>
              <p class="name">{{ item.nickName }}</p>
            </div>
          </el-col>
          <el-col class="time">{{ item.create_time | timeFormat }}</el-col>
        </el-row>
        <el-row class="row3">
          {{ item.comments }}
        </el-row>
      </el-row>
    </el-row>
  </el-card>
</template>

<script>
import { timeFormat } from "@/utils/utils.js";
import { getComments, addComments } from "@/api/comment";
import { get } from "http";
import { getToken } from "@/utils/auth";

export default {
  props: ["articleId"],
  data() {
    return {
      commentList: [],
      input: "",
    };
  },
  filters: {
    timeFormat,
  },
  mounted() {
    this.getComments();
  },
  methods: {
    chatTo(id){
      console.log(id)
    },
    changeSort() {
      this.commentList.reverse();
    },
    //获取评论
    async getComments() {
      console.log(this.articleId);
      const res = await getComments(this.articleId);
      console.log(res);
      this.commentList = res.data.filter((item) => item.isShow);
    },
    // 添加评论
    async submit() {
      const user = getToken();
      if (!user) return this.$message.warning("请先登录");
      if (!this.input) return this.$message.error("请输入评论");
      const res = await addComments(this.articleId, {
        user_id: user.id,
        comments: this.input,
      });
      if (res.meta.status >= 300) return this.$message.error("提交失败");
      this.$message.success("提交成功");
      this.$alert("评论内容审核通过后即可展示", "提交成功", {
        confirmButtonText: "确定",
      });
      this.getComments();
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  margin-top: 40px;
  color: #8590a6;
}

.comments_row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f6f6f6;

  .count {
    font-weight: 600;
  }

  .time {
    text-align: right;
  }
}

.article_list {
  .list {
    .list_item + .list_item {
      border-top: 1px solid #eee;
    }

    .list_item {
      padding: 20px 0;
    }
  }
}

.row1 {
  display: flex;
}

.title {
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
}

.time {
  text-align: right;
  color: #8590a6;
  font-size: 15px;
}

.userInfo {
  display: flex;
  align-items: center;

  .img {
    margin-right: 10px;
  }

  .name {
    font-size: 15px;
    font-weight: 600;
    color: #444;
  }
}

.text-button {
  color: #8590a6;

  &:hover {
    color: #76839b;
  }
}
</style>
